<template>
  <div class="navmenu">
    <i class="iconfont icon-xiala" @click="menupull=1"></i>
    <div class="menubar">
      <!-- <ul>
        <li
          v-for="(item, index) in menu"
          :key="index"
          :class="currentindex == index ? 'choose' : ''"
          @click="chooseitem(index)"
        >
          <span>{{ item }}</span>
          <div class="underline"></div>
        </li>
      </ul>-->
      <van-tabs v-model="currentindex" color="#fb7299" title-active-color='#fb7299'>
        <van-tab  v-for="(item, index) in tabs"
            :to="item.rid?{path: '/channel/'+item.rid}:{path:'/'}"
            :key="index"
            :class="currentindex == index ? 'choose' : ''"
            >
            <div slot="title" @click="chooseitem(index,item)">
              {{item.name}}
            </div>
        </van-tab>
      </van-tabs>
    </div> 
    <div :class="'showall '+(menupull==0?'':(menupull==-1?'shangla':'xiala'))" >
      <ul>
        <li
          v-for="(item, index) in tabs"
          :key="index"
          :class="currentindex == index ? 'choose' : ''"
          @click="chooseitem(index,item)"
        >
          <span>{{ item.name }}</span>
        </li>
      </ul>
      <i class="iconfont icon-shangla" @click="menupull=-1"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: ["tabs"],
  data() {
    return {
      currentindex: 0,
      menupull: 0,
    };
  },
  methods: {
    chooseitem(index,item) {
      this.currentindex = index;
      console.log(item)
      this.$emit('changeCategoryId',item)
    },
    setmenupull(x) {
      this.menupull = x;
      setTimeout(() => (this.menupull = 0), 1000);
    },
  },
};
</script>

<style>
.navmenu .van-tabs--line .van-tabs__wrap{
  height: 3rem !important;
}
.navmenu .van-tab{
  font-size: 1.18rem !important;
  padding: 0 1.3rem  !important;
}
.navmenu .van-tabs__wrap--scrollable .van-tabs__nav--complete{
  padding: 0;
}
.navmenu .van-tabs__line{
  left: 0 !important;
  z-index: 1 !important;
  width: 2.5rem !important;
  border-radius: 0.075rem !important;
  height: 0.15rem !important;
  min-height: 2px !important;
  bottom: 0;
}
.navmenu .van-tabs__wrap--scrollable {
  padding: 0 !important;
}
</style>

<style lang="less" scoped>
@import "../../assets/css/common";
@import "../../assets/css/iconfont";

.navmenu {
  *{
    background-color: #fff;
  }
  position: relative;
  border-bottom: 0.5px solid rgb(240, 240, 240);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  .icon-xiala {
    padding: 0 0.8rem;
    font-size: 0.9rem;
    font-weight: bold;
    color: #999;
    line-height: 1.8rem;
  }
  .showall {
    height: 13rem;
    position: absolute;
    top: -13rem;
    z-index: 1;
    left: 0;
    &.xiala {
      animation: xiala 0.5s forwards;
    }
    &.shangla {
      animation: shangla 0.5s forwards;
    }
    ul {
      width: 90vw;
      margin: 0 5vw;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      li {
        &.choose span {
          color: @color;
        }
        span {
          font-size: 1.15rem;
          white-space: nowrap;
          color: #888;
        }
        padding: 1.1rem 0.8rem;
      }
    }
    .icon-shangla {
      padding: 0 0.8rem;
      font-size: 0.9rem;
      font-weight: bold;
      color: #999;
      line-height: 1.8rem;
      left: 50vw - 1.2rem;
      position: relative;
      bottom: 0;
    }
  }
  .menubar {
    overflow: hidden;
    align-items: center;
    ul {
      display: flex;
      flex-wrap: nowrap;
      width: fit-content;
      li {
        display: flex;
        flex-direction: column;
        font-weight: 100;
        margin-left: 2rem;
        padding: 0 0.36rem;
        .underline {
          background-color: transparent;
          height: 0.15rem;
          min-height: 2px;
          border-radius: 1rem;
          margin-top: 0.6rem;
        }
        &:first-child {
          margin-left: 0;
        }
        span {
          font-size: 1.15rem;
          white-space: nowrap;
        }
        &.choose {
          .underline {
            background-color: @color;
          }
          span {
            color: @color;
          }
        }
      }
    }
  }
}
@keyframes shangla {
  0% {
    top: 0rem;
  }
  100% {
    top: -13rem;
  }
}
@keyframes xiala {
  0% {
    top: -13rem;
  }
  100% {
    top: 0rem;
  }
}
</style>>
